<template>
    <a-table bordered :columns="columns" :data-source="tableValue" :pagination="false">
        <template #bodyCell="{ column, record, index }">
            <template v-if="column.key === 'index'">
                {{ index + 1 }}
            </template>
            <template v-if="column.key === 'key'">
                <a-input v-model:value="record.Key" @blur="blur"/>
            </template>
            <template v-if="column.key === 'value'">
                <a-input v-model:value="record.Value" @blur="blur"/>
            </template>
            <template v-if="column.key === 'operation'">
                <a-space>
                    <a-button type="primary" :icon="h(PlusOutlined)" @click="addRow(index)" />
                    <a-button :icon="h(MinusOutlined)" @click="removeRow(index)" />
                </a-space>
            </template>
            <template v-if="column.key === 'result'">
                <a-tag color="green" v-if="!record.error">
                    格式正确
                </a-tag>
                <a-tag color="red" v-else>
                    校验错误
                </a-tag>
            </template>
        </template>
    </a-table>

</template>

<script setup lang="ts">
import { RequestParamsTypeEnum, type RequestParamsObjType } from '@/const';
import { MinusOutlined, PlusOutlined } from '@ant-design/icons-vue';
import { computed, h, reactive, ref, watch } from 'vue';
import type { TableValueItemType, TableValueType } from './type';

const props = withDefaults(defineProps<{
    target:any
}>(),{})

// 更新方法
const emits = defineEmits<{
    (e:'update',val:RequestParamsObjType):void
}>()

const columns = [
    {
        title: '#',
        dataIndex: 'index',
        key: 'index',
        align: 'center'
    },
    {
        title: 'Key',
        dataIndex: 'Key',
        key: 'key',
        width: '250px',
        align: 'center'
    },
    {
        title: 'Value',
        dataIndex: 'Value',
        key: 'value',
        width: '250px',
        align: 'center'
    },
    {
        title: '操作',
        dataIndex: 'operation',
        key: 'operation',
        align: 'center'
    },
    {
        title: '结果',
        dataIndex: 'result',
        key: 'result',
        align: 'center'
    }
]

const tableValue = ref<TableValueType>([])

watch(
    ()=>props.target,
    ()=>{
        /* 
        "Params": {
                "name": "zq"
            }
        */
        tableValue.value = []
        const keys = Reflect.ownKeys(props.target)
        for (let i = 0; i < keys.length; i++) {
            const Key = keys[i];
            const Value = props.target[Key]
            tableValue.value.push({Key,Value,error:false})
        }
        // 初始化
        if(tableValue.value.length == 0){
            tableValue.value.push({Key:'',Value:'',error:false})
        }
    },
    {deep:true,immediate:true}
)

const addRow = (index: number) => {
    tableValue.value.splice(index + 1, 0, {
        Key: '',
        Value: '',
        error: false
    })
}

const removeRow = (index: number) => {
    if (tableValue.value.length == 1) {
        tableValue.value[0] = {
            Key: '',
            Value: '',
            error: false
        }
        return
    }
    tableValue.value.splice(index, 1)
}

// 失去焦点处理
const blur = ()=>{
    let count = 0
    tableValue.value.forEach((item:TableValueItemType,index:number)=>{
        if((item.Key !== '' && item.Value == '') || (item.Key === '' && item.Value !== '')){
            item.error = true
        }else {
            item.error = false
            count++ //成功个数
        }
    })

    if(count === tableValue.value.length){
        // 全部通过
        let params :any= {}
        tableValue.value.forEach((item:TableValueItemType,index:number)=>{
            params[item.Key] = item.Value
        })
        if(tableValue.value.length == 1 && tableValue.value[0].Key == '' && tableValue.value[0].Value == ''){
            params = {}
        }
        emits('update',params)
    }
}
</script>

<style lang='scss' scoped></style>